<extend name="./public/frame.html"/>
<block name="content">
    <blockquote class="layui-elem-quote search" style="-webkit-margin-end: 0px;">
        <div class="layui-inline">
            <input type="text" class="layui-input" id="cus_name" placeholder="请输入姓名">
        </div>
        <div class="layui-inline">
            <input type="text" class="layui-input" id="cus_phone" placeholder="请输入手机号">
        </div>
        <div class="layui-inline">
            <button class="layui-btn" data-type="search">搜索</button>
            <button class="layui-btn layui-btn-disabled" data-type="" id="reset">复位</button>
            <button class="layui-btn layui-btn-warm" data-type="add">新增排班人员</button>
            <button class="layui-btn" data-type="edit">客服排班</button>
        </div>
    </blockquote>
    <table class="layui-table" lay-data="{width:'auto', height:'auto', url:'{$url}', page: true, limit: 10, id:'custom'}"
           lay-filter="custom">
        <thead>
        <tr>
            <th lay-data="{checkbox:true, fixed: true}"></th>
            <th lay-data="{field:'id', width:60, fixed: true, sort: true}">ID</th>
            <th lay-data="{field:'blong_route', width:200,}">归属路线</th>
            <th lay-data="{field:'admin_id', width:100, sort:true}">admin_ID</th>
            <th lay-data="{field:'cus_name', width:100,}">姓名</th>
            <th lay-data="{field:'cus_phone', width:120,}">手机号</th>
            <th lay-data="{field:'wx_account', width:160}">微信号（备用）</th>
            <th lay-data="{fixed:'right', toolbar: '#barDemo', width:120, align:'center'}">操作</th>
        </tr>
        </thead>
    </table>

    <script type="text/html" id="barDemo">
        <!--<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="detail">管理区域</a>-->
        <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit">修改</a>
        <a class="layui-btn layui-btn-normal layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
    </script>
    <script>
        layui.use(['table','laydate'], function () {
            var table = layui.table;
            var laydate = layui.laydate;
            lay('.date').each(function(){
                laydate.render({
                    elem: this
                    ,type: 'date'
                    ,trigger: 'click'
                });
            });
            table.on('tool(custom)', function (obj) {
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                var id = data.id;
                if(layEvent === 'detail'){
                    layer.open({
                        type: 2,
                        title: '客服：'+data.cus_name+'的管理区域',
                        shadeClose: true,
                        shade: 0.8,
                        area: ['100%', '100%'],
                        content: '{:url("/admin/custom/detail","admin_id=")}' + id, //iframe的url
                    });
                }
                if(layEvent === 'edit'){
                    layer.open({
                        type: 2,
                        title: data.cus_name+'的信息',
                        shadeClose: true,
                        shade: 0.8,
                        area: ['100%', '100%'],
                        content: '{:url("/admin/custom/edit","id=")}' + id, //iframe的url
                    });
                }
                if (layEvent === 'del') {
                    layer.confirm('确认删除排班客服么',{icon:3}
                        ,function (index, layero) {
                            $.post('/admin/custom/delete',{id:id},function (res) {
                                switch (res['status']){
                                    case 1:
//                                        obj.del();
                                        layer.alert(res['msg'],{icon: 1});
                                        break;
                                    default:
                                        layer.alert(res['msg'],{icon: 5});
                                        break;
                                }
                                layer.close(index);
                                setTimeout(function (e) {
                                    window.location.reload();
                                },1000);
                            },'json');
                        });
                }
            });
            var $ = layui.jquery, active = {
                search: function () {
                    var cus_name = $('#cus_name').val();
                    var cus_phone = $('#cus_phone').val();
                    var reset = $('#reset');
                    if (cus_name||cus_phone) {
                        reset.removeClass('layui-btn-disabled').addClass('layui-btn-normal').data('type', 'reset');
                        table.reload('custom', {
                            url: '/admin/custom/search',
                            where: {
                                cus_name: cus_name,
                                cus_phone: cus_phone,
                            } //设定异步数据接口的额外参数
                        });
                    } else {
                        reset.removeClass('layui-btn-normal').addClass('layui-btn-disabled').data('type', '');
                        layer.alert('搜索项不能为空');
                    }
                }
                , reset: function () {
                    var reset = $('#reset');
                    if (reset.data('type') !== '') {
                        table.reload('custom', {
                            url: '{$url}',where:{}
                        });
                    }
                    $('.layui-input').each(function () {                        $(this).val('');                    });                $('.layui-this').each(function () {$(this).removeClass('layui-this');});
                    reset.removeClass('layui-btn-normal').addClass('layui-btn-disabled').data('type', '');
                }
                , add: function () {
                    layer.open({
                        type: 2,
                        title: $(this).text(),
                        shadeClose: true,
                        shade: 0.8,
                        area: ['100%', '100%'],
                        content: '{:url("/admin/custom/add_customer")}', //iframe的url
                    });
                }
                , edit: function () {
                    layer.open({
                        type: 2,
                        title: $(this).text(),
                        shadeClose: true,
                        shade: 0.8,
                        area: ['100%', '100%'],
                        content: '{:url("/admin/custom/schedule")}', //iframe的url
                    });
                }
            };
            $('.layui-btn').on('click', function () {
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });
        });
    </script>
</block>
